<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .a{
            height: 65px;
            background-color:white;
        }
        .b{
            height: 50px;
            width: 100px;
            float: left;
            margin-right: 100px;
        }
        .b img{
            margin: 10px auto 10px 30px;
        }
        c{
            float: left;
            height: 65px;
            width: 400px;
        }
        .c img{
            margin: 10px 5px 10px 5px;
        }
        .c ul{
            float: right;
            margin: 10px 20px 10px 500px;
        }
        .c li{
            float: left;
            margin: auto 10px auto 10px;
        }
        .c a{
            text-decoration: none;
            color: black;
        } 
        .d{
            width: 1220px;
            height: 510px;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        .e{
            width: 910px;
            height: 510px;
            float: left;
            background-color: white;
        }
        .e img{
            width: 910px;
            height: 490px;

        }
        .f{
            float: right;
            width: 292px;
            height: 510px;
            margin: 0px 0px 0px 10px;
        }
        .f img{
            width: 290px;
            height: 163px;
            margin: 0px 0px 10px auto;
        }
        .f li{
            position: relative;
            width: 290px;
            height: 163px;
            margin-top: 10px;
        }
        .f a{
            word-wrap: break-word;
            text-decoration: none;
            color: azure;
        }
        g{
            height: 1080px;
            width: 1220px;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .h{
            height: 40px;
            width: 1220px;
            margin: 0px auto 10px auto;
            display: block;
        }
        .h li{
            border: 1px solid black;
            height: 35px;
            width: 100px;
            float: left;
            background-color: white;
            margin: 3px 5px 2px 5px;
            line-height: 35px;
            padding-left: 10px;
        }
        .i{
            height: 1010px;
            width: 1220px;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .i li{
            float: left;
            height: 330px;
            width: 290px;
            text-align: center;
            margin: 0px 7px 10px 7px;
        }
        .i a{
            word-wrap:break-word;
            text-decoration: none;
            text-align: center;
        }
        .i span{
            color: lightslategrey;
            font-size: 13px;
        }
        .j{
            height: 35px;
            width: 1220px;
            background-color: white;
            margin: 0 auto 10px auto;   
        }
        .k{
            height: 240px;
            width: 1220px;
            margin: 10px auto 40px auto;
        }
        .l{
            width: 1220px;
            height: 100px;
            margin-bottom: 40px;
        }
        .l li{
            float: left;
            margin: 10px 20px 10px 20px;
        }
        .n{
            width: 1220px;
            height: 35px;
            margin-bottom: 10px;
        }
        .n li{float: left;}
        .n a{
            text-decoration: none;
            color: dimgray;
        }
        .o{
            background-color: black;
            height: 35px;
        }
        .p{
            height: 35px;
            width: 350px;
            float: left;
        }
        .p li{float: left;margin-left: 10px;}
        .p a{
            text-decoration: none;
            color: grey;
            line-height: 35px;
        }
        .q{
            height: 35px;
            width: 120px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <img src="tu6.jpg" width="30px" alt="更多" srcset="">
        </div>
        <div class="c">
            <img src="tu1.jpg" width="30px" alt="">
            <img src="tu2.jpg" width="30px" alt="">
            <img src="tu3.jpg" width="30px" alt="">
            <img src="tu4.jpg" width="30px" alt="">
            <img src="tu5.jpg" width="20px" alt="">
            <ul>
                <li><img src="tu15.jpg" width="30px" alt=""></a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
    <div class="d">
        <div class="e">
            <img src="a1.jpg" alt="">
        </div>
        <div class="f">
            <ul>
                <li> <a href="#"> <img src="a2.jpg" alt=""><span style="position: absolute; bottom: 0px; left: 0px;">想点亮圣诞气氛？试试这个[驯鹿]灯</span></a></li>
                <li> <a href="#"><img src="a3.jpg" alt=""><span style="position: absolute; bottom: 0px; left: 0px;">Ddsigner 100,100个设计师，100个故事</span></a></li>
                <li> <a href="#"><img src="a4.jpg" alt=""><span style="position: absolute; bottom: 0px; left: 0px;">旧椅子获新生，还比以前更炫酷了</span></a></li>
            </ul>
        </div>
    </div>
    <div class="g">
        <div class="h">
            <ul>
                <li>最新</li>
                <li><pre>最热     <select style="border: none"></select></pre></li>
                <li><pre>热议     <select style="border: none;"></select></pre></li>
                <li>随机</li>
            </ul>
        </div>
        <div class="i">
            <ul>
                <li><a href="#">
                    <img src="a5.jpg" width="290px" height="195px" alt=""><br>用水才能擦去笔记，他只想保护好设计师的创意</a><br><br><br><pre><span>2小时前                122          2</span></pre></li>
                <li> <a href="#">
                    <img src="a6.jpg" width="290px" height="195px" alt=""><br>马桶刷也要有优雅的姿势</a><br><br><br><pre><span>3小时前        108       7</span></pre></li>
                <li><a href="#">
                    <img src="a7.jpg" width="290px" height="195px" alt=""><br>健身也走[科技范]，你以为这仅仅是个瑜伽垫？</a><br><br><br><pre><span>16小时前               407         11</span></pre></li>
                <li><a href="#">
                    <img src="a8.jpg" width="290px" height="195px" alt=""><br>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]刷吧</a><br><br><br><pre><span>16小时前               640         16</span></pre></li>
                <li><a href="#">
                    <img src="a9.jpg" width="290px" height="195px" alt=""><br>矮怎么了？照样能拿到书架顶端的书</a><br><br><br><pre><span>18小时前             534          24</span></pre></li>
                <li><a href="#">
                    <img src="a10.jpg" width="290px" height="195px" alt=""><br>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业</a><br><br><br><pre><span>19小时前               1064      23</span></pre></li>
                <li><a href="#">
                    <img src="a11.png" width="290px" height="195px" alt=""><br>中国国际设计节pk世界工业设计大会，哪个更棒</a><br><br><br><pre><span>20小时前              402      10</span></pre></li>
                <li><a href="#">
                    <img src="a12.jpg" width="290px" height="195px" alt=""><br>首届世界工业设计大会开在家门口杭州，中国设计师躁起来</a><br><br><br><pre><span>23小时前                303         9</span></pre></li>
                <li><a href="#">
                    <img src="a13.jpg" width="290px" height="195px" alt=""><br>窝在北方的暖炉里，你应该需要这样一个散热阀门？</a><br><br><br><pre><span>1天前              479       11</span></pre></li>
                <li><a href="#">
                    <img src="a14.jpg" width="290px" height="195px" alt=""><br>废纸打造的铅笔，像是一朵朵落入凡间的花</a><br><br><br><pre><span>2天前                533      34</span></pre></li>
                <li><a href="#">
                    <img src="a15.jpg" width="290px" height="195px" alt=""><br>倚靠在毯子上，这事听着就让人舒服</a><br><br><br><pre></pre><span>2天前                  463       19</span></li>
                <li><a href="#">
                    <img src="a16.jpg" width="290px" height="195px" alt=""><br>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</a><br><br><br><pre></pre><span>2天前             540       44</span></li>
            </ul>
        </div>
        <div class="j"><p style="text-align:center; line-height: 35px;">太快了吧，慢慢来:)</p></div>
    </div>
    <div class="k">
        <p style="color: dimgray; margin-bottom: 30px; display: block;">合作伙伴</p>
        <div class="l">
            <ul>
                <li><a href="#">
                    <img src="tu6.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu7.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu8.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu9.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu10.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu11.jpg" width="90px" alt=""></a></li>
                <li><a href="#">
                    <img src="tu12.jpg" width="90px" alt=""></a></li>
            </ul>
        </div>
        <p style="color: dimgray; margin-bottom: 30px; display: block;">友情链接</p>
        <div class="n">
            <ul>
                <li><a href="#">DRC北京工业设计创意产业基地 |</a></li>
                <li><a href="#">中国工业设计协会 |</a></li>
                <li><a href="#">设计邦 |</a></li>
                <li><a href="#">凤凰家具 |</a></li>
                <li><a href="#">智东西 |</a></li>
                <li><a href="#">壹网空间 |</a></li>
                <li><a href="#">七牛云储存 |</a></li>
                <li><a href="#">网易家居 |</a></li>
                <li><a href="#">高清图片 |</a></li>
                <li><a href="#">Fotor |</a></li>
            </ul>
        </div>
    </div>
    <div class="o">
        <div class="p">
            <ul>
                <li><a href="#">关于 |</a></li>
                <li><a href="#">合作 |</a></li>
                <li><a href="#">投稿 |</a></li>
                <li><a href="#">工业设计导航 |</a></li>
                <li><a href="#">站点地图 |</a></li>
            </ul>
        </div>
        <div class="q">
            <p style="color: gray; line-height: 35px; margin-right: 10px;">@2016 设计癖</p>
        </div>
    </div>
</body>
</html>